import {Avatar, Button, Card, Carousel, Divider, Message, Table,TableColumnProps, Tag} from '@arco-design/web-react'
import { invoke } from '@tauri-apps/api/core';
import VChart from "@visactor/vchart"
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
const Home = () => {
    const columns: TableColumnProps[] = [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Salary',
          dataIndex: 'salary',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
        {
          title: 'Email',
          dataIndex: 'email',
        },
      ];
      const data = [
        {
          key: '1',
          name: 'Jane Doe',
          salary: 23000,
          address: '32 Park Road, London',
          email: 'jane.doe@example.com',
        },
        {
          key: '2',
          name: 'Alisa Ross',
          salary: 25000,
          address: '35 Park Road, London',
          email: 'alisa.ross@example.com',
        },
        {
          key: '3',
          name: 'Kevin Sandra',
          salary: 22000,
          address: '31 Park Road, London',
          email: 'kevin.sandra@example.com',
        },
        {
          key: '4',
          name: 'Ed Hellen',
          salary: 17000,
          address: '42 Park Road, London',
          email: 'ed.hellen@example.com',
        },
        {
          key: '5',
          name: 'William Smith',
          salary: 27000,
          address: '62 Park Road, London',
          email: 'william.smith@example.com',
        },
      ];
      const imageSrc = [
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',
      ];
    useEffect(()=>{
        const spec = {
            data: [
              {
                id: 'barData',
                values: [
                  { month: '01月', sales: 22 },
                  { month: '02月', sales: 13 },
                  { month: '03月', sales: 25 },
                  { month: '04月', sales: 29 },
                  { month: '05月', sales: 38 },
                  { month: '06月', sales: 22 },
                  { month: '07月', sales: 13 },
                  { month: '08月', sales: 25 },
                  { month: '09月', sales: 29 },
                  { month: '10月', sales: 38 },
                  { month: '11月', sales: 22 },
                  { month: '12月', sales: 80 }
                ]
              }
            ],
            type: 'line',
            title:{visible:true,text:'gitcode 每月贡献量'},
            xField: 'month',
            yField: 'sales'
          };
          const vchart:any = new VChart(spec, { dom: 'home-chart' });
        // 绘制
        vchart.renderSync();
        console.log(1)
    },[])
    
    const [user,setUser] = useState<String>("还没登陆");
    const nav = useNavigate();
    useEffect(()=>{
        console.log("get users")
        const getLoginUsers = async () => {
            let result:Array<any> = await invoke("get_login_users")
            console.log(result)

            if (result.length>0){
                setUser(result[0].username)
            }else{
                nav('/login')
            }
        }

        getLoginUsers()
    },[])
    return(
        <>
            <div className='home-content'>
                <div className='home-content-left'>
                    <div>
                        <Card style={{margin:5}}>
                            <div className='home-card-titile'>Welcome Back, {user}!</div>
                            <Divider />
                            <div className='home-card-2'>
                                <div>1111</div>
                                <Divider type='vertical'/>
                                <div>2222</div>
                                <Divider type='vertical'/>
                                <div>3333</div>
                            </div>
                            <Divider />
                            <div id='home-chart' style={{height:300}}></div>
                        </Card>    
                    </div>
                    <div style={{display:'flex'}}>
                        <Card style={{width:'100%',margin:5}}>
                            <div>Welcome Back, {user}!</div>
                            <Table columns={columns} data={data}/>
                        </Card>
                        <Card style={{width:380,margin:5}}>
                            <div>Welcome Back, {user}!</div>
                        </Card>
                    </div>
                </div>
                <div className='home-content-right'>
                    <Card style={{width:380,margin:5}}>
                        <div>Welcome Back, {user}!</div>
                        <div onClick={() => Message.info("跳转用户中心。。。")}>
                            <Avatar>
                                <img alt='avatar' 
                                    src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'
                                />
                            </Avatar>
                            <span> {user}</span>
                        </div>
                        <div className='home-content-rigth-1'>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                        </div>
                        <div className='home-content-rigth-1'>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                            <div>
                                <div>13</div>
                                <div>关注</div>
                            </div>
                        </div>
                        <div className='home-content-rigth-2'>
                            <div>
                                <Button type='primary'>关注</Button>
                            </div>
                            <div>
                                <Button type='primary'>私信</Button>
                            </div>
                        </div>
                    </Card>
                    <Card style={{width:380,margin:5}}>
                        <Carousel
                            autoPlay={true}
                        >{imageSrc.map((src,index) =>(
                            <div key={index}><img src={src} style={{width:'100%'}}/></div>
                        ))}</Carousel>
                    </Card>
                    <Card style={{width:380,margin:5}}>
                        <div>Welcome Back, {user}!</div>
                        <div className='home-content-right-3'>
                            <div>
                                <Tag className="home-rigth-3-tag" color='green'>Activity</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag" color='red'>Info</Tag>
                                <span>新增内容尚未通过审核，详情请点击查...</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag" color='blue'>Notice</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag">Activity</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag">Activity</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag">Activity</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag">Activity</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag">Activity</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                            <div>
                                <Tag className="home-rigth-3-tag">Activity</Tag>
                                <span>内容最新优惠活动</span>
                            </div>
                        </div>
                    </Card>
                </div>
            </div>
            
        </>
    )
}
export default Home;